<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用axis</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <style>
        @keyframes spin {
            100% {
                transform: rotate(300deg);
            }
        }

        .spinner {
            width: 1em;
            height: 1em;
            padding-bottom: 12px;
            display: inline-block;
            animation: spin 2s linear infinite;
        }
    </style>
</head>

<body>

    <div id="app">
        <h3>Everest pizza delivery</h3>
        <button @click="order" :disabled="inProgress">Order pizza</button>
        <span class="spinner" v-show="inProgress">🍕</span>

        <h4>Pizza wanted</h4>
        <p>{{requests}}</p>
        <h4>Pizza ordered</h4>
        <span v-for="pizza in responses">
            {{pizza.id}}:{{pizza.req}}
        </span>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                inProgress: false,
                requests: new Object(null),
                responses: new Object(null),
                counter: 0,
                impatientAxios: undefined
            },
            created() {
                this.impatientAxios = axios.create({
                    timeout: 3000
                })
            },
            methods: {
                order(event, oldRequest) {
                    let requests = undefined;
                    if (oldRequest) {
                        request = oldRequest;
                    } else {
                        request = { req: '🍕', id: this.counter++ }
                    }
                    this.inProgress = true;
                    this.requests[request.id] = request;
                    this.impatientAxios.get('http://httpstat.us/200')
                        .then(response => {
                            this.inProgress = false;
                            this.responses[request.id] = this.requests[request.id];
                            delete this.requests[request.id];
                        })
                        .catch(e => {
                            this.inProgress = false;
                            console.error(e.meesage);
                            console.error(this.requests.s);
                            setTimeout(this.order(event, request), 1000);
                        })
                }
            }
        })
    </script>
</body>

</html>